import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { RecommendWrapper, RecommendItem } from '../style';

class Recommend extends Component {
  render() {
    const { recommendList } = this.props;
    return (
      <Fragment>
        {
          recommendList.map((item) => (
            <RecommendWrapper key={item.get('id')}>
              <RecommendItem imgUrl={item.get('imgUrl')} />
            </RecommendWrapper>
          ))
        }        
      </Fragment>
    );
  };
};

const myState = (state) => ({
  recommendList: state.getIn(['home', 'recommendList'])
});

export default connect(myState, null)(Recommend);